<template>
  <p class="main-title-bar" :class="'main-title-bar--' + layoutSkin">
    <slot></slot>
  </p>
</template>

<script>
export default {
  name: 'MainTitle',
  computed: {
    layoutSkin: {
      get() { return this.$store.state.common.layoutSkin; }
    }
  }
};
</script>

<style lang="scss" scoped>
.main-title-bar{
  padding-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  height: 30px;
  line-height: 30px;
  background: #e8edf3;
  &--dark{
    color: #fff;
    background: #173c67;
  }
}
</style>